<template>
  <div class="chartbod">
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="24" :sm="24" :lg="12" :xl="12">
        <div class="leftboder">
          <div :id="id" :class="className" :style="{height:height,width:width}" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12" :xl="12">
        <div class="rightboder">
          <div :id="idtwo" :class="classNametwo" :style="{height:height,width:width}" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { dataStatistics } from '@/api/datastatistics/index'
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    classNametwo: {
      type: String,
      default: 'chartwo'
    },
    idtwo: {
      type: String,
      default: 'chartwo'
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    }
  },
  data() {
    return {
      chart: null,
      data: 'd',
      searchKey: {
        time: ''
      },
      page: {
        currentPage: 1, // 当前页
        pageSize: 20, // 默认条数
        totalRow: 0, // 总条数
        totalPage: 0 // 总页数
      }
    }
  },
  mounted() {
    this.initChart()
    this.initChartreg()
  },
  // beforeDestroy() {
  //   if (!this.chart) {
  //     return
  //   }
  //   if (!this.chartwo) {
  //     return
  //   }
  //   this.chart.dispose()
  //   this.chart = null
  // },
  methods: {
    initChart() {
      var that = this
      var params = {}
      params.page = that.page.currentPage// 当前页数
      params.pageSize = that.page.pageSize// 每页展示条数
      params.data = that.data
      if (that.searchKey.time && that.searchKey.time.length > 0) {
        params.start_time = that.searchKey.time[0] // 申请寄回开始时间
        params.end_time = that.searchKey.time[1] // 申请寄回结束时间
      } else {
        params.start_time = ''
        params.end_time = ''
      }
      dataStatistics(params).then(res => {
        this.chart = echarts.init(document.getElementById(this.id))
        var datate = []
        const data = res.data
        for (var i = 0; i < data.reg_list.length; i++) {
          that.fee = data.reg_list[i].num
          datate.push(that.fee)
        }
        this.chart.setOption({
          backgroundColor: '#fff',
          title: {
            text: '近8天挂号量统计',
            subtext: '2020-01',
            left: '10',
            top: '6',
            textStyle: {// 主标题的属性
              color: '#333', // 颜色
              fontSize: 16, // 大小
              fontFamily: 'PingFang SC' // 字体
            },
            subtextStyle: {// 副标题的属性
              color: '#333'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
          // top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '5%',
            height: '70%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7, 8],
            splitLine: {
              lineStyle: {
                color: '#E1E1E1'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#4A5A7F',
                fontSize: 14
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#E1E1E1'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#4A5A7F',
                fontSize: 14
              }
            },
            axisTick: {
              show: false
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            data: datate,
            type: 'line',
            smooth: true,
            // name: '折线图',
            symbol: 'none',
            lineStyle: {
              color: '#3275FB',
              width: 4,
              shadowColor: 'rgba(0,0,0,0.2)', // 设置折线阴影
              shadowBlur: 10,
              shadowOffsetY: 10
            }
          }]

        })
      }).catch(error => {
        that.$message({
          message: error
        })
      })
    },
    initChartreg() {
      var that = this
      var params = {}
      params.page = that.page.currentPage// 当前页数
      params.pageSize = that.page.pageSize// 每页展示条数
      params.data = that.data
      if (that.searchKey.time && that.searchKey.time.length > 0) {
        params.start_time = that.searchKey.time[0] // 申请寄回开始时间
        params.end_time = that.searchKey.time[1] // 申请寄回结束时间
      } else {
        params.start_time = ''
        params.end_time = ''
      }
      dataStatistics(params).then(res => {
        var datate = []
        const data = res.data
        for (var i = 0; i < data.business_list.length; i++) {
          that.fee = data.business_list[i].fee
          datate.push(that.fee)
        }
        this.chartwo = echarts.init(document.getElementById(this.idtwo))
        this.chartwo.setOption({
          backgroundColor: '#fff',
          title: {
            text: '近8天交易量统计',
            subtext: '2020-01',
            left: '10',
            top: '6',
            textStyle: {// 主标题的属性
              color: '#333', // 颜色
              fontSize: 16, // 大小
              fontFamily: 'PingFang SC' // 字体
            },
            subtextStyle: {// 副标题的属性
              color: '#333'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
          // top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '5%',
            height: '70%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7, 8],
            splitLine: {
              lineStyle: {
                color: '#E1E1E1'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#4A5A7F',
                fontSize: 14
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#E1E1E1'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#4A5A7F',
                fontSize: 14
              }
            },
            axisTick: {
              show: false
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            data: datate,
            type: 'line',
            smooth: true,
            // name: '折线图',
            symbol: 'none',
            lineStyle: {
              color: '#3275FB',
              width: 4,
              shadowColor: 'rgba(0,0,0,0.2)', // 设置折线阴影
              shadowBlur: 10,
              shadowOffsetY: 10
            }
          }
          ]
        })
      }).catch(error => {
        that.$message({
          message: error
        })
      })
    }

  }
}
</script>
<style  scoped>
.chartbod{
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px 0;
  box-sizing: border-box;
}
.leftboder{
  width: 600px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rightboder{
  width: 600px;
  height: 302px;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>

